<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background:black; text-align:center;}
    #c1 {background:white;}
    </style>
    <script>
    window.onload=function (){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');

      let oImg=new Image();
      oImg.src='http://localhost/2018-3-20/2.jpg';

      oImg.onload=function (){
        gd.drawImage(oImg, 0, 0);

        let imageData=gd.getImageData(0, 0, oC.width, oC.height);

        //console.log(imageData.data);
        alert(
          'r:'+imageData.data[0]+'\n'+
          'g:'+imageData.data[1]+'\n'+
          'b:'+imageData.data[2]+'\n'+
          'a:'+imageData.data[3]
        );
      };
    };
    </script>
  </head>
  <body>
    <canvas id="c1" width="750" height="498"></canvas>
  </body>
</html>
